---
title: FormControl | gluestack-ui | Installation, Usage, and API

description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.

pageTitle: FormControl

pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Forms/FormControl" />

import {
  Icon,
  AlertCircleIcon,
  CircleIcon,
  CheckIcon,
} from '@gluestack-ui/themed';
import {
  FormControl,
  FormControlLabel,
  FormControlLabelText,
  FormControlHelper,
  FormControlHelperText,
  FormControlError,
  FormControlErrorIcon,
  FormControlErrorText,
  Input,
  InputField,
} from './FormControl';
import { Center, Text as FormControlText, Heading } from '@gluestack-ui/themed';
import {
  ChevronDownIcon,
  Button,
  ButtonText,
  Radio,
  RadioGroup,
  RadioIcon,
  RadioIndicator,
  RadioLabel,
  Checkbox,
  CheckboxGroup,
  CheckboxIndicator,
  CheckboxIcon,
  CheckboxLabel,
} from '@gluestack-ui/themed';
import {
  Textarea,
  TextareaInput,
  Select,
  SelectTrigger,
  SelectInput,
  SelectIcon,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectDragIndicatorWrapper,
  SelectDragIndicator,
  SelectItem,
  Switch,
} from '@gluestack-ui/themed';
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  Modal,
  ModalBackdrop,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter,
  HStack,
  VStack,
} from '@gluestack-ui/themed';
import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  Text,
  InlineCode,
} from '@gluestack/design-system';

import { useState } from 'react';

import Wrapper from '../../core-components/nativewind/Wrapper';
import { Box } from '../../core-components/nativewind/box';
import { CollapsibleCode } from '@gluestack/design-system';

This is an illustration of **FormControl** component.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
        <Box className="h-32 w-72">
          <FormControl {...props}>
            <FormControlLabel className="mb-1">
              <FormControlLabelText>Password</FormControlLabelText>
            </FormControlLabel>
            <Input>
              <InputField
                type="password"
                defaultValue="12345"
                placeholder="password"
              />
            </Input>
            <FormControlHelper>
              <FormControlHelperText>
                Must be at least 6 characters.
              </FormControlHelperText>
            </FormControlHelper>
            <FormControlError>
              <FormControlErrorIcon
                as={AlertCircleIcon}
              />
              <FormControlErrorText>
                At least 6 characters are required.
              </FormControlErrorText>
            </FormControlError>
          </FormControl>
        </Box>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Input,
        InputField,
        AlertCircleIcon,
        Box,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['sm', 'md', 'lg'],
          default: 'md',
        },
        isDisabled: {
          control: 'boolean',
          default: false,
        },
        isInvalid: {
          control: 'boolean',
          default: false,
        },
        isReadOnly: {
          control: 'boolean',
          default: false,
        },
        isRequired: {
          control: 'boolean',
          default: false,
        },
      },
    }}
  />
</Wrapper>

<br />

## Installation

### Step 1: Install the following dependencies:

```bash

npm i @gluestack-ui/form-control

```

### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx  %%-- File: core-components/nativewind/form-control/index.tsx --%% 
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.

## API Reference

To use this component in your project, include the following import statement in your file.

```bash
import { FormControl } from '@/components/ui/form-control';
```

```jsx
export default () => (
  <FormControl>
    <FormControlLabel>
      <FormControlLabelText />
    </FormControlLabel>
    <FormControlHelper>
      <FormControlHelperText />
    </FormControlHelper>
    <FormControlError>
      <FormControlErrorIcon />
      <FormControlErrorText />
    </FormControlError>
  </FormControl>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### FormControl

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isInvalid</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`When true, invalid state.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isRequired</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, astrick gets activated.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Disabled state true.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isReadOnly</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`To manually set read-only state.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`To manually set disable to the FormControl.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### FormControlLabel

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### FormControlLabelText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### FormControlHelper

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### FormControlHelperText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### FormControlError

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### FormControlErrorIcon

It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.

#### FormControlErrorText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

### Features

- Keyboard support for actions.
- Support for hover, focus and active states.
- Option to add your styles or use the default styles.

### Props

FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props).

<!--
## Spec Doc

Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.

<iframe
  style={{
    borderRadius: '8px',
    border: ' 1px solid rgba(0, 0, 0, 0.1)',
    aspectRatio: 736 / 585,
  }}
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D5030-22048%26t%3DIS25mxEIlIP9OacJ-1%26scaling%3Dscale-down%26page-id%3D5030%253A19919%26starting-point-node-id%3D5030%253A22048%26mode%3Ddesign"
  allowfullscreen
></iframe> -->
